import { Link, Warning } from '@brillout/docpress'
import { ProvidedBy, ConfigSpec } from '../../components'

<ConfigSpec
  env="server"
  global
  providedBy={<ProvidedBy noCustomGuide />}
>
```ts ts-only hide-menu
type Value = string | null | undefined
type Favicon = Value | ((pageContext) => Value)
```
</ConfigSpec>

<Warning>
  This setting is experimental and may be removed in the future. Consider <Link href="/Head">using `+Head`</Link> instead.
</Warning>

The `favicon` setting sets the page's favicon.

```ts
// pages/+config.ts

import type { Config } from 'vike/types'
import favicon from './favicon.svg'

export default {
  favicon
} satisfies Config
```

> If you want to set a different favicon for different pages, then consider creating a custom setting as shown at <Link href="/head-tags#custom-settings" />.


## See also

- <Link href="/head-tags" />
- <Link href="/settings#html-shell" doNotInferSectionTitle />
